{
    title:  'ESP Tour',
    crumbs: [
        { 'Getting Started': 'index.html' },
    ],
}
            <h1>ESP Tour</h1>
            <p>This quick tour of the ESP Web Framework provides an overview of ESP and how to use it 
            to create ESP pages and ESP applications.</p>

            <p>Before you start, make sure you have read the <a href="quick.html">Quick Start</a> and
            that you have ESP installed on your system so you can try the commands as you go.</p>
            <p>
                <a class="ui labeled small icon blue button" href="https://embedthis.com/esp/download.html">
                    <i class="download cloud icon"></i>
                    Download ESP</a>
            </p>

            <a id="run"></a>
            <h2>Running ESP</h2>
            <p>The ESP web framework includes a utility program called <em>esp</em> that is used to initialize and
                then run your application.</p>
            <p>To start the tour, create a directory to contain your ESP application and then from that directory,
                run <em>esp</em>. In this example, we create a directory called "<em>test</em>". The directory
                name is used as the default name for your application, so choose a name that can be a valid 
                <em>C</em> identifier.</p>

            <pre class="code">
<b>$ mkdir test
$ cd test
$ esp</b>
esp: 2: Started HTTP service on "127.0.0.1:4000"
esp: 1: Started at Mon Apr 14 15:00:42 2014 PDT</pre>
            <p>ESP is now running and ready to serve documents from the "<em>test</em>" directory.</p>


            <a id="hello"></a>
            <h2>Hello World</h2>
            <p>The first step in any tour is to create a simple "Hello World" web page. ESP web pages have 
            an <em>.esp</em> extension.
            Create a file called <em>hello.esp</em> using your favorite text editor in the <em>test</em> directory
            with the following content:</p>
            <pre class="code">
&lt;html&gt;
&lt;body&gt;
&lt;h1&gt;Hello World&lt;/h1&gt;
&lt;/body&gt;
</pre>
            <p>To view the "Hello" web page, type the following URL: 
            <em>http://localhost:4000/hello.esp</em> into your browser.</p>
            <img src="../images/esp/tour/hello.png" alt="hello" class="bare-screen" /> 

            <a id="dynamic"></a>
            <h2>Dynamic Content</h2>
            <p>While that was fun, the output is static and boring, so let's add some dynamic content. You can embed
            <em>C</em> language code and ESP function calls  by including them inside a special ESP web page directive that 
            will be executed and converted to HTML before being sent to the client. There are a variety of server-side 
            ESP web page directives, the one you'll use first, is: </p>

            <pre class="code">&lt;%= expression %&gt;</pre>

            <p>To add the current date and time, modify the hello.esp web page and add the highlighted line:</p>
            <pre class="code">
&lt;h1&gt;Hello Bright World&lt;/h1&gt;
&lt;h2&gt;Generated on <b>&lt;%= mprGetDate(0); %&gt;</b>&lt;/h2&gt;
</pre>
            <p>Now when you re-run the page, it will display the current date and time. If you refresh the page by
            pressing reload, the new date and time will be displayed.</p>
            
            <img src="../images/esp/tour/hello-dynamic.png" alt="hello" class="bare-screen" />

            <h3>No Restart Required</h3>
            <p>Notice that you did not have to restart the web server, nor did you have to manually recompile the
            ESP code. Rather, ESP transparently recompiled the web page in the background. ESP noticed that the 
            hello.esp web page had been modified and it re-parsed and compiled it into a loadable module 
            ready for execution. The loaded module is cached in-memory and on-disk for fast execution by 
            subsequent requests.</p>

            <p>In the output from the <em>esp</em> command, you may have noticed:</p>

            <pre class="code">
esp: 2: GET /hello.esp HTTP/1.1
esp: 2: esp: compile hello.esp
esp: 2: Loading native module view_d2f3bdb8df0a0f0b440ea83c81b618c5.dylib
esp: 2:   HTTP/1.1 200 OK</pre>
            <p>This output traces each request and response, but also notifies you that the page was recompiled.
            Any request or page syntax errors will be show in the esp log output.</p>
            <p>You can also embed arbitrary C code in your ESP page, like:</p>

            <pre class="code">
<b>&lt;h3&gt;&lt;% render("Request method is %s", getMethod()); %&gt;&lt;/h3&gt;</b>
<b>&lt;% 
    int i;
    for (int i = 0; i &lt; 10; i++) {
        render(" Line: %d&lt;/br&gt;\r\n", i);
    } 
%&gt;</b>
</pre>
            <p>By using the ESP statement directive <em>&lt;% code %&gt;</em>, you can embed arbitrary <em>C</em> language
            statements in your web page. The <em>render</em> function allows you to write arbitrary data which is patched
            back where the directive was defined in the page. See the <a href="../users/pages.html">ESP Pages</a>
            document for full details about all the ESP web page directives.</p>
            <p>For help on the <em>esp</em> utility, use <em>man esp</em> or invoke esp with the 
                <em>esp -help</em> switch.</p>
            <pre class="code">$ <b>man esp</b>
$ <b>esp -help</b></pre> 

            <a id="learn"></a>
            <h2>Learn More ...</h2>
            <p>That concludes a quick tour through some of the capabilities of the ESP web framework. 
            To learn more, please read:</p>
            <ul>
                <li><a href="app-tour.html">ESP Applications Tour</a>
                <li><a href="index.html">User's Guide</a></li>
                <li><a href="../users/pages.html">ESP Pages</a></li>
                <li><a href="../ref/mvc.html">ESP MVC Framework</a></li>
            </ul>
